<template>
  <view class="head">
    <view class="head-box">
      <view class="head-box-main">
        <view class="left">
          <view class="left-find" @click="onTabsChange(0)"> 发现 </view>
          <view class="left-filter"> {{ activeData.classifyName }} </view>
          <view class="hLine" :style="{ left: !activeData.classifyName ? '35%' : '82%' }"></view>
        </view>
        <view class="right" @click="onTabsChange(1)">
          <uv-line direction="col" color="#b1b1b1" length="41.86rpx"></uv-line>
          <view class="right-text"> 筛选 </view>
        </view>
      </view>
    </view>
    <view
      class="head-content"
      :style="{
        height: mainHeight + 'px',
        transition: ready ? 'all 0.6s' : '',
        transform: activeVal === 0 ? 'translateY(-200%)' : 'translateY(0%)'
      }"
    >
      <view class="label">
        <text v-for="(item, index) in typeData" @click="typeVal = item.val" class="label-text" :class="{ typeActive: typeVal === item.val }">
          {{ item.label }}
        </text>
      </view>
      <view class="scroll">
        <view class="main">
          <view v-for="item in typeData[typeVal].children" class="main-item">
            <view class="main-item-box">
              <view class="name">{{ item.label }}</view>
              <view class="buttons">
                <view
                  v-for="(child, index) in item.data"
                  class="buttons-item"
                  @click="item.activeVal = child.val"
                  :class="{ 'buttons-acitve': item.activeVal === child.val }"
                >
                  <view class="text">
                    {{ child.label }}
                  </view>
                </view>
              </view>
              <!-- 单独处理时间 -->
              <template v-if="item.val === 0 && item.activeVal === 1">
                <uv-line margin="26.163rpx 0 0 17rpx"></uv-line>
                <view class="buttons">
                  <view
                    v-for="(child, index) in item.data[0].children"
                    class="buttons-item"
                    @click="item.data[0].activeVal = child.val"
                    :class="{ 'buttons-acitve': item.data[0].activeVal === child.val }"
                  >
                    <view class="text">
                      {{ child.label }}
                    </view>
                  </view>
                </view>
              </template>
            </view>
            <uv-line></uv-line>
          </view>
        </view>
      </view>
      <view class="oper">
        <view class="oper-button" @click="onReset">重置</view>
        <view class="oper-button oper-confirm" @click="onConfirm">确定</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { onLoad, onReady, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import store from '@/store/index.js'; //需要引入store
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import weekday from '@/common/js/weekday.js';
  dayjs.extend(weekday);
  let { state, commit } = store;
  const props = defineProps({
    mainHeight: {
      type: Number,
      default: 0
    }
  });
  let ready = ref(false);
  onLoad(() => {
    setTimeout(() => {
      ready.value = true;
    });
  });
  let activeVal = ref(0);
  let activeData = ref({});
  let typeData = ref([
    { val: 0, label: '门店视频课', dateVal: 0 },
    { val: 1, label: '门店教练课', dateVal: 0 },
    { val: 2, label: '自助课', dateVal: 0 },
    { val: 3, label: '老师视频', dateVal: 0 }
  ]);
  let typeVal = ref(0);
  let date = ref([
    {
      label: '不限',
      val: 0,
      activeVal: 0,
      children: [
        { label: '不限', val: 0 },
        { label: '11-13时', val: 1, date: '11:00-13:00' },
        { label: '13-15时', val: 2, date: '13:00-15:00' },
        { label: '15-17时', val: 3, date: '15:00-17:00' },
        { label: '17-19时', val: 4, date: '17:00-19:00' },
        { label: '19-21时', val: 5, date: '19:00-21:00' },
        { label: '21-24时', val: 6, date: '21:00-23:59' }
      ]
    },
    { label: '今天', val: 1, children: [] },
    { label: '三天内', val: 2, children: [] },
    { label: '本周', val: 3, children: [] }
  ]);
  let distance = ref([
    { label: '不限', val: 0, date: 0 },
    { label: '500M', val: 1, date: 500 },
    { label: '1 km', val: 2, date: 1000 },
    { label: '2 km', val: 3, date: 2000 },
    { label: '5 km', val: 4, date: 5000 },
    { label: '10 km', val: 5, date: 10000 },
    { label: '20 km', val: 6, date: 20000 }
  ]);
  let dances = computed(() => {
    return [{ label: '不限', val: 0 }, ...state.vuex_dances];
  });
  let difficulty = ref([
    { label: '不限', val: 0 },
    { label: '入门课', val: 1 },
    { label: '初级课', val: 2 },
    { label: '中级课', val: 3 },
    { label: '高级课', val: 4 },
    { label: '大师课', val: 5 }
  ]);
  // 重置
  const onReset = () => {
    typeData.value.map(r => {
      r.children.map(r => {
        r.activeVal = 0;
        // 单独处理时间
        if (r.val === 0) {
          r.data[0].activeVal = 0;
        }
      });
    });
  };
  typeData.value.map(r => {
    if ([0, 1].includes(r.val)) {
      r.children = [
        { data: date.value, label: '日期/时间', val: 0, activeVal: 0 },
        { data: distance.value, label: '距离', val: 1, activeVal: 0 },
        { data: dances.value, label: '舞种', val: 2, activeVal: 0 },
        { data: difficulty.value, label: '难度', val: 3, activeVal: 0 }
      ];
    }
    if (r.val === 2) {
      r.children = [
        { data: dances.value, label: '舞种', val: 2, activeVal: 0 },
        { data: difficulty.value, label: '难度', val: 3, activeVal: 0 }
      ];
    }
    if (r.val === 3) {
      r.children = [{ data: difficulty.value, label: '难度', val: 3, activeVal: 0 }];
    }
  });
  let emits = defineEmits(['onSubmit']);

  const onConfirm = () => {
    let acitve = typeVal.value;
    let params = {
      date_min: '',
      date_max: '',
      start_hour: '',
      end_hour: '',
      grade: [],
      distance: 0,
      dances: [],
      classify: 'MerchantLesson'
    };

    typeData.value[acitve].children.map(r => {
      // 日期单独处理
      if (r.val === 0) {
        // 如果选择了今天
        if (r.activeVal === 1) {
          // 首选选择了今天，那不管怎么样 日期可以确定
          params.date_max = params.date_min = dayjs().format('YYYY-MM-DD');
          // 我把数据挂在了不限下面，所以直接0就好了。如果也是0.代表了，选择今天不限
          if (r.data[0].activeVal === 0) {
            params.start_hour = '00:00';
            params.end_hour = '23:59';
          } else {
            let date = r.data[0].children[r.data[0].activeVal].date.split('-');
            params.start_hour = date[0];
            params.end_hour = date[1];
          }
        } else if (r.activeVal === 2) {
          // 三天内
          params.date_max = dayjs().add(3, 'day').format('YYYY-MM-DD');
          params.date_min = dayjs().format('YYYY-MM-DD');
          params.start_hour = '00:00';
          params.end_hour = '23:59';
        } else if (r.activeVal === 3) {
          // 本周
          params.date_max = dayjs().day(6).add(1, 'day').format('YYYY-MM-DD');
          params.date_min = dayjs().day(0).add(1, 'day').format('YYYY-MM-DD');
          params.start_hour = '00:00';
          params.end_hour = '23:59';
        }
      } else if (r.val === 1) {
        // 点了距离，那我就要申请
        if (r.activeVal !== 0) {
          params.distance = r.data[r.activeVal].date;
          // 先看权限
          uni.getSetting({
            success(res) {
              // 如果没有申请定位权限就申请
              if (!res.authSetting['scope.userLocation']) {
                uni.authorize({
                  scope: 'scope.userLocation',
                  success() {
                    getLocation(params, acitve);
                  },
                  fail() {
                    getLocation(params, acitve);
                  }
                });
              } else {
                getLocation(params, acitve);
              }
            }
          });
        }
      } else if (r.val === 2) {
        if (r.activeVal !== 0) {
          params.dances = [r.activeVal];
        }
      } else if (r.val === 3) {
        if (r.activeVal !== 0) {
          params.grade = [r.activeVal];
        }
      }
    });
    // 如果有距离的话，那就等待申请地址权限完成了之后，让那边去请求
    if (!params.distance) {
      onSubmitEmit(params, acitve);
    }
  };
  const getLocation = (params, acitve) => {
    uni.getLocation({
      type: 'wgs84',
      isHighAccuracy: true,
      success: res => {
        commit('$uStore', {
          name: 'vuex_position',
          value: {
            longitude: res.longitude,
            latitude: res.latitude
          }
        });
        onSubmitEmit(params, acitve);
      },
      fail: res => {
        uni.showToast({
          title: res.errMsg,
          icon: 'none'
        });
        onSubmitEmit(params, acitve);
      }
    });
  };
  const onSubmitEmit = (params, acitve) => {
    params.classify = ['OfflineLesson', 'MerchantLesson', 'OnlineLesson', 'Video'][acitve];
    activeData.value = { ...params, classifyName: typeData.value[acitve].label };
    emits('onSubmit', params);
    activeVal.value = 0;
  };
  const onTabsChange = async val => {
    activeVal.value = val;
    if (val === 0) {
      activeData.value = {};
      emits('onSubmit', {});
    }
    if (val === 1 && !dances.value.some(r => r.val)) {
      // 请求舞种数据
      let data = await uni.$uv.http.post('app/setting/dances', { classify: 1 });
      data = data.map(item => {
        return { label: item.name, val: item.id };
      });
      commit('$uStore', {
        name: 'vuex_dances',
        value: data
      });
      typeData.value.map(r => {
        if ([0, 1].includes(r.val)) {
          r.children[2].data = dances.value;
        } else if (r.val === 2) {
          r.children[0].data = dances.value;
        }
      });
    }
  };
  const goHome = () => {
    activeData.value.classifyName = '';
  };
  defineExpose({ goHome });
</script>

<style lang="scss" scoped>
  .head {
    position: relative;
    font-family: Source Han Sans CN;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 24.419rpx;
    background: rgba(251, 251, 251, 1);

    &-box {
      padding: 10.465rpx 13.953rpx;
      &-main {
        z-index: 2;
        height: 64.535rpx;
        box-sizing: border-box;
        width: 100%;
        background: rgba(0, 0, 0, 1);
        box-shadow: 0px 0px 17.442rpx 0px rgba(0, 0, 0, 0.25);
        border-radius: 19.186rpx;
        display: flex;
        color: #fff;
        align-items: center;
        .left {
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          &-find {
            flex: 1;
            text-align: center;
            font-size: 34.884rpx;
            font-weight: 900;
          }
          &-filter {
            font-size: 27.907rpx;
            width: 146rpx;
            margin-right: 38.372rpx;
            text-align: center;
            white-space: nowrap;
          }
          .hLine {
            position: absolute;
            transform: translate(-50%, 150%);
            bottom: 0;
            left: 25%;
            transition: all 0.3s;
            width: 158.721rpx;
            height: 6.977rpx;
            border-radius: 15px 0px 0px 0px;
            background: rgba(255, 122, 102, 1);
          }
        }
        .right {
          color: #d8d8d8;
          font-size: 27.907rpx;
          display: flex;
          align-items: center;
          &-text {
            padding-right: 40.116rpx;
            padding-left: 27.907rpx;
          }
        }
      }
    }
    &-content {
      width: 100%;
      transform: translateY(-200%);
      position: absolute;
      top: 90.698rpx;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      .label {
        height: 116.86rpx;
        font-weight: 400;
        text-align: left;
        display: flex;
        &-text {
          flex: 1;
          text-align: center;
          margin-top: 29.651rpx;
        }
      }
      .typeActive {
        font-weight: 900;
      }
      .scroll {
        flex: 1;
        overflow: hidden;
        .main {
          overflow-y: auto;
          height: 100%;
          margin: 0 38.372rpx;
          background: rgba(255, 255, 255, 1);
          border-radius: 19.186rpx;
          &-item {
            &-box {
              padding: 26.163rpx 45.349rpx;
              .name {
                font-weight: 900;
                margin-bottom: 19.186rpx;
              }
              .buttons {
                display: flex;
                flex-wrap: wrap;
                &-item {
                  min-width: 25%;
                  .text {
                    padding: 0 26.163rpx;
                    transition: all 0.3s;
                    height: 31px;
                    border-radius: 22rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: rgba(100, 100, 100, 1);
                    background: rgba(229, 229, 229, 1);
                    margin: 12.419rpx 8.721rpx;
                  }
                }
                &-acitve {
                  .text {
                    background: rgba(255, 122, 102, 1);
                    color: #fff;
                  }
                }
              }
            }
          }
        }
      }
      .oper {
        display: flex;
        align-items: center;
        height: 156.977rpx;
        &-button {
          flex: 1;
          height: 69.767rpx;
          border-radius: 78.488rpx;
          background: rgba(229, 229, 229, 1);
          color: rgba(149, 149, 149, 1);
          font-size: 34.884rpx;
          font-weight: 400;
          line-height: 52.326rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 34.884rpx;
          margin-right: 26.163rpx;
        }
        &-confirm {
          margin-left: 26.163rpx;
          margin-right: 34.884rpx;
          background: rgba(255, 122, 102, 1);
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
</style>
